import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

//懒加载
const About = () =>import('../views/About')

Vue.use(VueRouter)


const routes = [
  // {path: "/", redirect:"/home"},
  {
    // path: '/home',
    path: '/',
    name: 'Home',
    meta:{
      title:"首页"
    },
    component: Home,
    //嵌套路由
    children:[
      {
        // '/child1'
        path:"child1",
        component:() => import("../views/HomeChild")
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    meta:{
      title:"关于"
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited. 路由懒加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    // component: About,
    children: [
      {
        // '/about/achild'
        path: "achild",
        name: 'achild',
        component:() => import("../views/AboutChild")
      }
    ]
  },
  {
    // path: '/query/:p',
    path: '/query',
    name: 'Query',
    meta:{
      title:"查询"
    },
    component: () => import("../views/Query"),
  },
]

const router = new VueRouter({
  mode: 'history',  //采用history url路由方式（非传统方式再路由前有/#）
  base: process.env.BASE_URL,
  routes,
  // linkActiveClass: "active"  //指定修改router-link中active属性
})

// 全局导航守卫
router.beforeEach((to, from, next) =>{
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转
  document.title = to.matched[0].meta.title    //设置title
  //如果直接访问login，放行
  // if (to.path === "/login") return next();
  // //查询token。没有跳转login
  // if (!window.sessionStorage.getItem("token") || !window.localStorage.getItem("token")) {
  //   return next("/login")
  // }
  //next必须调用
  next()
})

export default router
